
import * as api from '@/api/home/department.js'
import { mapState, mapActions } from 'vuex'
export default {
    data() {
        return {
            simpleList: '',//负责人列表
            delDialog: false, //删除谈话框
            dialogFormVisible: false, //编辑弹出框
            addForm: {
                name: '', //部门名称
                code: '', //部门编码
                manager: '', //负责人
                introduce: '' //部门介绍
            },
            loginInfo: {}, //编辑信息
            delInfo: {},//删除信息
            rules: {
                name: { required: true, message: '请输入部门名称', trigger: 'blur' },
                code: [
                    { required: true, message: '请输入部门编码', trigger: 'blur' },
                    {
                        pattern: /^[a-zA-Z\d]+$/,
                        message: '请输入由字母或数字组成的部门编码',
                        trigger: 'blur'
                    }],
                manager: { type: 'date', required: true, message: '请选择负责人', trigger: 'change' }
            }
        }
    },
    computed: {
        ...mapState('department', ['deparmentList']),
        views_department() {
            const newdata = this.deparmentList.map((item) => ({
                ...item,
                children: []
            }))
            for (const item of newdata) {
                if (item.pid) {
                    const parent = newdata.find((Pitem) => Pitem.id == item.pid)
                    if (parent) parent.children.push(item)
                }
            }
            // 处理数据将children编排到
            const allList = newdata.filter((item) => !item.pid)
            // 将处理好的数据放入函数中加工
            const data = this.handleChildren(allList)
            return data
        }
    },
    mounted() {
        this.getDepartmentList()
        this.getsimpleList()
    },

    methods: {
        ...mapActions('department', ['getDepartmentList']),
        // 请求部门列表
        handleChildren(data) {
            const newdata = []
            for (const item of data) {
                if (item.children !== []) {
                    const newitem = {
                        ...item,
                        label: item.name,
                        children: this.handleChildren(item.children)
                    }
                    newdata.push(newitem)
                } else {
                    newdata.push({ label: item.name, children: [] })
                }
            }
            return newdata
        },
        renderContent(h, { node, data, store }) {
            return (
                <span class="custom-tree-node">
                    <span v-show={node.childNodes == 0} class="leftDepartment">
                        <i class="el-icon-user-solid"></i>
                    </span>
                    <span class="contents">{node.label}</span>

                    <span class="operation">
                        <span class="manager"> {node.data.manager}</span>
                        <el-dropdown on-command={this.openDialog}>
                            <span class="el-dropdown-link">
                                操作<i class="el-icon-arrow-down el-icon--right"></i>
                            </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item
                                    command={{
                                        a: node.data.id,
                                        b: 'add',
                                        c: node.data.pid,
                                        d: node.data
                                    }}
                                >
                                    添加子部门
                                </el-dropdown-item>
                                <el-dropdown-item
                                    command={{
                                        a: node.data.id,
                                        b: 'see',
                                        c: node.data.pid,
                                        d: node.data
                                    }}
                                >
                                    查看部门
                                </el-dropdown-item>
                                <el-dropdown-item
                                    command={{
                                        a: node.data.id,
                                        b: 'del',
                                        c: node.data.pid,
                                        d: node.data
                                    }}
                                >
                                    删除部门
                                </el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </span>
                </span>
            )
        },
        // 开打弹出框
        openDialog(command) {
            this.loginInfo = command
            if (command.b == 'add') {
                this.dialogFormVisible = true
                return
            } else if (command.b == 'see') {
                this.addForm = command.d
                this.dialogFormVisible = true
                return
            } else {
                this.delDialog = true
            }
        },
        // 添加部门
        appendDepartment(formName) {

            this.$refs[formName].validate(async (valid) => {
                if (!valid) {
                    console.log('error submit!!');
                    return false;
                }
                else {
                    await api
                        .postDepartment(this.addForm, this.loginInfo.a)
                        .then((res) => {
                            this.addForm = {}
                            this.$message({
                                message: '添加成功',
                                type: 'success'
                            });
                        })
                        .catch((err) => {
                            console.dir(err)
                            this.$message.error('错了哦');
                        })
                    this.dialogFormVisible = false
                    this.getDepartmentList()
                }
            });







        },
        //编辑部门
        async editDepartment() {
            await api
                .putDepartment(this.addForm)
                .then((res) => {
                    this.addForm = {}
                    // console.log(res)
                    this.$message({
                        message: '编辑成功',
                        type: 'success'
                    });
                })
                .catch((err) => {
                    console.dir(err)
                    this.$message.error('错了哦');
                })
            this.dialogFormVisible = false
            this.getDepartmentList()
        },
        //关闭编辑弹出框
        noneDialog(formName) {
            this.$refs[formName].resetFields();
            this.dialogFormVisible = false
            this.addForm = {}
        },
        //删除部门
        async delDer() {
            await api
                .delDepartment(this.loginInfo.a)
                .then((res) => {
                    // console.log(res)
                    this.getDepartmentList()
                    this.$message({
                        message: '删除成功',
                        type: 'success'
                    });
                })
                .catch((err) => {
                    console.dir(err)
                    this.$message.error('错了哦');
                })
            this.delDialog = false
        },
        //添加部门弹框
        departmentOfAdd(command) {
            this.dialogFormVisible = true
        },
        //获取负责人列表
        async getsimpleList() {
            await api.getsimple()
                .then((res) => {
                    this.simpleList = res.data.data
                })
                .catch((err) => {
                    console.dir(err)
                    this.$message.error('错了哦');
                })
        }
    }
}
